<template>
	<view v-if="show" class="modal-overlay" @tap="close">
		<view class="vip-modal" @tap.stop>
			<view class="modal-header">
				<text class="modal-title">开通会员</text>
				<text class="close-btn" @tap="close">×</text>
			</view>
			<view class="vip-content">
				<view class="vip-banner">
					<image class="vip-icon" src="/static/images/vip-crown.png" mode="aspectFit"></image>
					<view class="vip-intro">
						<text class="vip-slogan">解锁全部高级功能</text>
						<text class="vip-desc">畅享无限次配音、专业音色</text>
					</view>
				</view>
				<view class="vip-options">
					<view 
						v-for="(level, key) in vipLevels" 
						:key="key"
						class="vip-option"
						:class="{ active: selectedVipLevel === key }"
						@tap="selectVipLevel(key)"
					>
						<view class="option-header">
							<text class="level-name">{{ level.name }}</text>
							<text class="level-tag" v-if="level.tag">{{ level.tag }}</text>
						</view>
						<text class="level-price">¥{{ level.price }}</text>
						<text class="price-desc">{{ level.priceDesc }}</text>
						<view class="level-features">
							<view class="feature-item" v-for="(feature, index) in level.features" :key="index">
								<text class="feature-icon">✓</text>
								<text class="feature-text">{{ feature }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="vip-footer">
					<button class="buy-btn" :loading="isLoading" @tap="handleBuy">立即开通</button>
					<text class="agreement">开通即表示同意<text class="link">《会员服务协议》</text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { VIP_LEVELS } from '@/services/user'

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['update:show', 'buy'])

const selectedVipLevel = ref('VIP1')
const isLoading = ref(false)

const vipLevels = computed(() => {
	const levels = { ...VIP_LEVELS }
	delete levels.FREE
	return levels
})

// 监听show属性变化
watch(() => props.show, (newVal) => {
	if (!newVal) {
		// 重置状态
		selectedVipLevel.value = 'VIP1'
		isLoading.value = false
	}
})

function close() {
	emit('update:show', false)
}

function selectVipLevel(level) {
	selectedVipLevel.value = level
}

async function handleBuy() {
	if (isLoading.value) return
	
	try {
		isLoading.value = true
		emit('buy', selectedVipLevel.value)
	} catch (error) {
		uni.showToast({
			title: error.message || '开通失败',
			icon: 'none'
		})
	} finally {
		isLoading.value = false
	}
}
</script>

<style lang="scss">
.modal-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	animation: fadeIn 0.3s ease-out;
}

.vip-modal {
	position: relative;
	width: 100%;
	background: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	overflow: hidden;
	max-height: 90vh;
	transform: translateY(0);
	animation: slideUp 0.3s ease-out;
	
	.modal-header {
		position: relative;
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #f5f5f5;
		background: #fff;
		
		&::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 12rpx;
			transform: translateX(-50%);
			width: 60rpx;
			height: 6rpx;
			background: #e5e5e5;
			border-radius: 3rpx;
		}
		
		.modal-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
		
		.close-btn {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 40rpx;
			color: #999;
			padding: 10rpx;
		}
	}
	
	.vip-content {
		padding: 30rpx;
		max-height: calc(90vh - 90rpx);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		
		.vip-banner {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			padding: 20rpx;
			background: linear-gradient(45deg, #FFD700, #FFA500);
			border-radius: 16rpx;
			
			.vip-icon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
			
			.vip-intro {
				flex: 1;
				
				.vip-slogan {
					display: block;
					font-size: 32rpx;
					font-weight: 600;
					color: #ffffff;
					margin-bottom: 8rpx;
				}
				
				.vip-desc {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.9);
				}
			}
		}
		
		.vip-options {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin-bottom: 40rpx;
			
			.vip-option {
				flex: 1;
				min-width: 200rpx;
				padding: 24rpx;
				border-radius: 16rpx;
				background: #f8f8f8;
				border: 2rpx solid transparent;
				transition: all 0.3s ease;
				
				&.active {
					background: #fff;
					border-color: #07c160;
					box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.1);
				}
				
				.option-header {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.level-name {
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
					}
					
					.level-tag {
						margin-left: 12rpx;
						padding: 4rpx 12rpx;
						font-size: 20rpx;
						color: #fff;
						background: #ff6b6b;
						border-radius: 20rpx;
					}
				}
				
				.level-price {
					display: block;
					font-size: 40rpx;
					font-weight: 600;
					color: #07c160;
					margin-bottom: 4rpx;
				}
				
				.price-desc {
					display: block;
					font-size: 22rpx;
					color: #999;
					margin-bottom: 20rpx;
				}
				
				.level-features {
					.feature-item {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;
						
						.feature-icon {
							color: #07c160;
							margin-right: 8rpx;
							font-size: 24rpx;
						}
						
						.feature-text {
							font-size: 24rpx;
							color: #666;
						}
					}
				}
			}
		}
		
		.vip-footer {
			text-align: center;
			
			.buy-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(45deg, #07c160, #10ad7d);
				color: #fff;
				font-size: 32rpx;
				font-weight: 600;
				border-radius: 44rpx;
				margin-bottom: 20rpx;
				border: none;
				
				&:active {
					opacity: 0.9;
					transform: scale(0.99);
				}
			}
			
			.agreement {
				font-size: 24rpx;
				color: #999;
				
				.link {
					color: #07c160;
				}
			}
		}
	}
}

@keyframes fadeIn {
	from {
		background: rgba(0, 0, 0, 0);
	}
	to {
		background: rgba(0, 0, 0, 0.5);
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
</style> 